<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="../../../../src/css/common/reset.css">
    <link rel="stylesheet" href="com-tab.css">
    <script src="../../lib/jquery.js"></script>
    <style>
        .demo{width:500px;margin:0 auto;border:1px solid #ebebeb;}
    </style>
</head>
<body>

<div class="demo clearfix">

    <section id="" class="com-tab">
        <div class="tab-header">
            <ul class="header-item">
                <li data-name="a" class="item-list active">选项一</li>
                <li data-name="b" class="item-list">选项二</li>
                <li data-name="c" class="item-list">选项三</li>
            </ul>
        </div>
        <div class="tab-content">
            <div class="content-list">a</div>
            <div class="content-list hide">b</div>
            <div class="content-list hide">c</div>
        </div>
    </section>

    <section>

    </section>

</div>

<script>

    $(".com-tab").find('.item-list').on('click',function(){
        var v = $(this).index();
        $(".tab-content").find('.content-list').eq(v).removeClass('hide').siblings('.content-list').addClass('hide');
        $(this).addClass('active').siblings('.item-list').removeClass('active')
    })
</script>
</body>
</html>